<extend name="Cart/base"/>

<block name="header">
<link rel="stylesheet" href="__PUBLIC__/Home/css/confirm.css">
</block>


<block name="content">

<div class="conrm-section w">
	<div class="thisPon">
		<div class="ponState clearfix">
			<span class="fl one">1</span>
			<span class="fl two">2</span>
			<span class="fl three active">3</span>
		</div>
		<div class="ponTitle clearfix">
			<i class="fl l">我的购物车</i>
			<i class="fl c">确认订单信息</i>
			<i class="fl r active">成功提交订单</i>
		</div>
	</div>
	<!--填写核对订单信息-->
	<div class="orInfio">
		<h2 class="t">填写并核对订单信息</h2>
		<ul class="detailed">
			<li class="receipt">
				<div class="clearfix receiptCh">
					<h6 class="fl">收货人信息</h6>
					<a href="javascript:;" class="fr">新增加收货地址</a>
				</div>

				<foreach name="addr_list" item="addr">
					<div data-id="{$addr['id']}" class="consignee-item clearfix" <if condition="$addr['status'] neq 1">style="display:none"</if> >
						<div class="fl <if condition="$addr['status'] eq 1">active<else />place</if> " onclick="chose_address(this)">
							{$addr['alias']|default=$addr['realname']}
							<em></em>
						</div>
						<span class="fl">{$addr['realname']}</span>
						<span class="fl ed"> {$addr['addr_alone']} </span>
						<span class="fl">{$addr['mobile']}</span>
						<a href="javascript:;" class="fr">编辑</a>
					</div>
				</foreach>
				<div class="addr-switch switch-on" id="consigneeItemAllClick" onclick="show_consignee_all(this)">
                    <span>更多地址</span><b></b>
                </div>
			</li>
			<li class="distribution">
				<h6>配送方式</h6>
				<div class="payment clearfix">

				<foreach name="carry" item="vo" key="k">
					<span class="fl <if condition="$k eq 0">active</if>" data-id="{$vo['id']}">{$vo['carry_title']}<em></em></span>
				</foreach>
				</div>
			</li>
			<li class="confirm">
				<div class="clearfix titPart">
					<h6 class="fl">确认订单信息</h6>
				</div>
				<div class="payment clearfix">
					<div class="subject clearfix">
						<span class="fl ition">商品信息</span>
						<span class="fl atte">商品属性</span>
						<span class="fl price">单价</span>
						<span class="fl number">数量</span>
						<span class="fl dint">优惠方式</span>
						<span class="fl sual">小计</span>
					</div>
					<div class="paymentCon clearfix" data-id="{$goods.goods_id}">
						<div class="con-parent clearfix fl">
							<a href="javascript:;" class="fl">
								<img src="{$img}">
							</a>
							<div class="fl ition" style="padding-left: 10px;">
								<h5>{$goods.title}</h5>
								<a href="javascript:;"></a>
							</div>
						</div>
						<div class="fl atte">
							<foreach name="spec" item="spec_item">
								{$spec_item['name']}:{$spec_item['item']}<br>
							</foreach>
						</div>
						<div class="fl price">￥{$goods.price_member}</div>
						<div class="fl number">1</div>
						<div class="fl dint">省0.00</div>
						<div class="fl sual">￥{$goods.price_member}</div>
					</div>
					<!--配送方式-->
					<div class="ditrnMode">
						配送方式：{$carry[0]['carry_title']}
					</div>
					<!--订单备注-->
					<div class="rderNote clearfix">
						<span class="fl">添加订单备注：</span>
						<input type="text" class="fl" placeholder="提示：请勿填写有关支付、收货、发票方面的信息">
						<em class="fl"> 提示：请勿填写有关支付、收货、发票方面的信息</em>
					</div> 
				</div>
			</li>
			<!--发票信息-->
		</ul>
		<div class="atmoney">
			<p><b>1</b>&nbsp;件商品，总商品金额：<span>￥{$goods.price_member}</span></p>
            <p>优惠券：￥0.00</p>
            <p>积分抵扣：￥0.00</p>
			<p>运费：<span>￥0.00</span></p>
		</div>
		<div class="total">
			<p class="one">
				<span>应付总额：</span> 
				<b>￥{$pay_total}</b>
			</p>
			<p class="two">寄送至：{$addr_default['addr_alone']}&nbsp;&nbsp;收货人：{$addr_default['realname']} &nbsp;{$addr_default['mobile']}</p>
		</div>
		<div class="randbtn clearfix">
			<input type="button" value="提交订单" class="fr" onclick="return confirm()">
		</div>
	</div>
</div>

<!--地址编辑and新建-->
<div class="ui-dialog">
	<div class="ui-dialog-child"></div>
	<div class="consignee">
		<div class="ui-dialog-title clearfix">
			<span class="fl">新增收货人信息</span>
			<a href="javascript:;" class="fr"></a>
		</div>
		<div class="inPtn">
			<p class="clearfix">
				<span class="fl"><i>*</i> 收货人：</span>
				<input type="text" class="fl itxt" id="realname">
			</p>
			<p class="clearfix">
				<span class="fl"><i>*</i> 所在地区：</span>
				<select name="province" id="prov"></select>
				<select name="city" id="city"></select>
				<select name="area" id="area"></select> 
			</p>
			<p class="clearfix">
				<span class="fl"><i>*</i> 详细地址：</span>
				<input type="text" class="fl itxt" id="address">
			</p>
			<p class="clearfix">
				<span class="fl"><i>*</i> 手机号码：</span>
				<input type="text" class="fl itxt" id="mobile">
			</p>
			<p class="clearfix">
				<span class="fl">地址别名：</span>
				<input type="text" class="fl itxt" id="alias">
			</p>
			<p class="clearfix">
				<span class="fl">邮政编码：</span>
				<input type="text" class="fl itxt" id="zipcode">
			</p>
			<input id="address_change_type" type="submit" class="submit" value="保存收货人信息" onclick="return address_change(this)">
		</div>
	</div>
</div>

<div class="Invoice_background"></div>

<script src="__JS__/header.js"></script>
<script type="text/javascript">

/**
 * 显示所有的收货人
 */
function show_consignee_all(ele) {

	var close_css = '', open_css='';
	if ($(ele).hasClass('switch-off')) { // 点击了关闭
		close_css = 'switch-off';
		open_css  = 'switch-on';

		// 将选中对象移动到第一个位置
		$(ele).siblings('.consignee-item').each(function(index, obj){
			var div = $(obj).find('div');
			if (div.hasClass('active')) {
				$(obj).css('display', 'block');
				$(ele).siblings('.receiptCh').after($(obj).prop("outerHTML"));
				$(obj).remove();
				return true;
			}

			$(obj).css('display', 'none');
		});

	} else { // 点击了打开
		close_css = 'switch-on';
		open_css  = 'switch-off';

		$(ele).siblings('.consignee-item').each(function(index, obj){
			if (index == 0) {
				return true;
			}
			if ($(obj).css('display') == 'none') {
				$(obj).css('display', 'block');
			} else {
				$(obj).css('display', 'none');
			}
		})
	}

	$(ele).removeClass(close_css);
	$(ele).addClass(open_css);

}

/**
 * 选择收货人地址
 */
function chose_address(ele) {
	$(ele).parent().siblings('.consignee-item').each(function(index, obj) {
		var div = $(obj).find('div');
		if (div.hasClass('active')) {
			div.removeClass('active');
			div.addClass('place');
		}
	});
	$(ele).removeClass('place');
	$(ele).addClass('active');
	render_total(ele);
}

/**
 * 收货地址
 */
function find_address(ele, target) {
	var href = "{:U('/Home/UserAddress/find')}";
	var addr_id = $(ele).parent().attr('data-id');
	$.ajax({
		url:href,
		type:'POST',
		data:{'addr_id':addr_id},
		success: function(data){
			if (data && target) {
				target(data);
			}
		}
	})
}


/**
 * 渲染对话框
 * @param  {array} data 数据
 * @param  {integer} type 行为:1.添加 2.编辑
 */
function render_dialog(data, type) {
	if (data.length < 1) {
		data = {
			id: '',
			title:'新增收货地址',
			realname:'',
			prov: '',
			city: '',
			dist: '',
			address: '',
			mobile: '',
			alias: '',
			zipcode: ''
		};
	}

	var dialog = $('.ui-dialog');
	dialog.find('.ui-dialog-title span').html(data.title);
	var field = dialog.find('.inPtn p');

	// 名字
	field.eq(0).find('input').val(data.realname);

    // 地址
    var sel = field.eq(1).find('select');
    sel.empty();
    if (type == 2) {
        sel.each(function(index, ele) {
            var name = $(ele).attr('name')
            if (name.length < 0) {return true;}
            switch(name) {
                case 'province': 
                    region_find(0, ele, data.prov);
                break;
                case 'city': 
                    region_find(data.prov, ele, data.city);
                break;
                case 'area': 
                    region_find(data.city, ele, data.area);
                break;
            }
        });
    } else {
        region_find(0, sel[0], 0);
    }

	// 详细地址
	field.eq(2).find('input').val(data.address);

	// 手机
	field.eq(3).find('input').val(data.mobile);

	// 别名
	field.eq(4).find('input').val(data.alias);

	// 邮编
	field.eq(5).find('input').val(data.zipcode);

	// 新增 || 编辑
	$('#address_change_type').attr('data-type', type);
	$('#address_change_type').attr('data-id', data.id);

}

/**
 * 地址提交
 */
function address_change(obj) {
    var field = $(obj).parent().find('p');
    var data  = {};
    data.id   = $(obj).attr('data-id');

    // 名字
    data.realname = field.eq(0).find('input').val();
    if (data.realname == null || data.realname.length < 1) {
        layer.tips('名字必填', '#realname');
        return false;
    }

    // 地址
    var vali = true;
    field.eq(1).find('select').each(function(index, ele) {
        var name = $(ele).attr('name')
        switch(name) {
            case 'province': 
                data.prov = $(ele).val();
                data.prov_name = $(ele).find("option:selected").text();
                if (data.prov == null || data.prov.length < 1) {
                    layer.tips('国家必填', '#prov');
                    vali = false
                    return false;
                }
            break;
            case 'city': 
                data.city = $(ele).val();
                data.city_name = $(ele).find("option:selected").text();
                if (data.city == null || data.city.length < 1) {
                    layer.tips('城市必填', '#city');
                    vali = false
                    return false;
                }
            break;
            case 'area': 
                data.dist = $(ele).val();
                data.dist_name = $(ele).find("option:selected").text();
                if (data.dist == null || data.dist.length < 1) {
                    layer.tips('区域必填', '#dist');
                    vali = false
                    return false;
                }
            break;
        }
    });
    if (!vali) {
        return false;
    }

    // 详细地址
    data.address = field.eq(2).find('input').val();
    if (data.address == null || data.address.length < 1) {
        layer.tips('详细地址必填', '#address');
        return false;
    }

    // 手机
    data.mobile  = field.eq(3).find('input').val();
    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/; 
    if(!myreg.test(data.mobile)) 
    { 
        layer.tips('请正确填写手机号', '#mobile');
        return false; 
    } 

    // 别名
    data.alias   = field.eq(4).find('input').val();
    if (data.alias.length < 1) {
        data.alias = data.realname;
    }

    // 邮编
    data.zipcode = field.eq(5).find('input').val();

    var href = "{:U('/Home/UserAddress/addReceiveAddress')}";
    var act  = $(obj).attr('data-type');
    if (act == 2) {
        href = "{:U('/Home/UserAddress/editAddress')}";
    }
    $.ajax({
        url: href,
        data: data,
        type: 'POST',
        success: function(ret) {
            if (ret.status != 1) {
                layer.msg('编辑失败');
                return false;
            }

            (act == 1) ? data.id = ret.data : true;
            $('.ui-dialog').removeClass('active');
            change_address_list(data, parseInt(act));
        }
    });
    return false;
}

/**
 * 修改收货地址列表
 * @param  {array} data
 * @param  {integer} type: 1.添加 2.修改
 */
function change_address_list(data, type) {
    var obj = null;
    var receipt = $('.orInfio .detailed li.receipt');
    switch(type) {
        case 1:
            obj = '<div class="consignee-item clearfix"><div class="fl" onclick="chose_address(this)"></div><span class="fl"></span><span class="fl ed"></span><span class="fl"></span><a href="javascript:;" class="fr">编辑</a></div>';

            // 清空样式,添加当前样式
            var item = receipt.find('.consignee-item');
            if (item.length > 0) {
                item.each(function(index, ele){
                    if ($(ele).find('div').hasClass('active')) {
                        $(ele).find('div').removeClass('active');
                        $(ele).find('div').addClass('place');
                    }
                });
                item.eq(0).before(obj);
            } else {
                receipt.find('div.receiptCh').eq(0).after(obj);
            }
            obj = receipt.find('.consignee-item').eq(0);
        break;
        case 2:
            var consignee = $(receipt).find('.consignee-item');
            $(consignee).each(function(index, item) {
                if ($(item).attr('data-id') == data.id) {
                    obj = item;
                    return false;
                }
            });
        break;
    }

    $(obj).attr('data-id', data.id);
    $(obj).find('div').html(data.alias+'<em></em>');
    $(obj).find('div').addClass('active');
    $(obj).find('span').eq(0).text(data.realname);
    var address = data.prov_name+data.city_name+data.dist_name+data.address;
    $(obj).find('span').eq(1).text(address);
    $(obj).find('span').eq(2).text(data.mobile);
    
    var ele = $(obj).find('div');
    render_total(ele);
}


/**
 * 渲染订单信息
 */
function render_total(consignee) {
	consignee    = $(consignee).parent();
	var realname = $(consignee).find('span').eq(0).text();
	var address  = $(consignee).find('span').eq(1).text();
	var mobile   = $(consignee).find('span').eq(2).text();
	var orInfio  = $('.orInfio .total .two');
	orInfio.text('寄送至：'+address+' 收货人：'+realname+' '+mobile);
}


/**
 * 快递选择
 */
function chose_carry(ele) {
	var text  = $(ele).text();
	var carry = $('.orInfio .detailed .confirm .payment .ditrnMode')
	carry.text('快递方式：'+text);
}


/**
 * 提交订单
 */
function confirm() {
	// 收货人
	var consignee_id = 0;
	var items = $('.orInfio .receipt .consignee-item');
	items.each(function(index, ele) {
		if ($(ele).find('div').hasClass('active')) {
			consignee_id = $(ele).attr('data-id');
			return true;
		}
	});

	// 配送方式
	var carry_id   = 0;
	var carry_type = $('.orInfio .distribution div span');
	carry_type.each(function(index, ele){
		if ($(ele).hasClass('active')) {
			carry_id = $(ele).attr('data-id');
			return true;
		}
	});

	//商品ID
	var cart_ids    = $('.orInfio .detailed .confirm .payment .paymentCon').attr('data-id');
	// 订单留言
	var message = $('.orInfio .detailed .confirm .payment .rderNote input').val();
    var data = {
        address_id: consignee_id,
        carry_type: carry_id,
        cart_id:    cart_ids,
        message:    message,
    };

	// 提交订单
	var href = "{:U('/Home/SpecialBusiness/place_order')}";
    StandardPost(href, data);
	return false;
}


function StandardPost(url,args) {
    var form = $("<form method='post'></form>");
    form.attr({"action":url});
    for (arg in args) {
        var input = $("<input type='hidden'>");
        input.attr("name", arg);
        input.val(args[arg]);
        form.append(input);
    }
    $(document.body).append(form);
    form.submit();
}

/**
 * 请求地址
 */
function region_find(region_id, select, select_id) {
    var url = "{:U('/Home/UserAddress/region')}";
    $.get(url, {region:region_id}, function(ret) {
        if (!ret) {
            layer.msg('地址信息获取失败');
            return false;
        }

        var sel = $(select);
        sel.empty();
        $.each(ret, function(index, data) {
            var option = $('<option>').val(data.id).text(data.name);
            if (data.id == select_id) {
                option.attr('selected', true);
            }
            sel.append(option);
        });
        if (select_id == 1) {
            sel.trigger('change');
        }
    });
}

$(function(){

    // 支付方式选择
    $('.conrm-section .orInfio .detailed li.method .payment span').on('click',function() {
        $('.conrm-section .orInfio .detailed li.method .payment span').removeClass('active').eq($(this).index()).addClass('active');
    });

    // 配送方式选择
    $('.conrm-section .orInfio .detailed li.distribution .payment span').on('click',function(){
        $('.conrm-section .orInfio .detailed li.distribution .payment span').removeClass('active').eq($(this).index()).addClass('active');
        var item = $('.orInfio .confirm .payment .ditrnMode');
        item.text('配送方式：' + $(this).text());

    });

    // 新增收货地址
    $('.orInfio .detailed .receipt .receiptCh a').on('click',function(){
        $('.ui-dialog').addClass('active');
        render_dialog([], 1);
    });

    // 编辑地址
    $('.orInfio .detailed .receipt').on('click', '.consignee-item a', function(){
        find_address(this, function(data){
            render_dialog(data, 2);
        });

        $('.ui-dialog').addClass('active');
    });

    // 关闭对话框
    $('.ui-dialog .consignee .ui-dialog-title a').on('click',function(){
        $('.ui-dialog').removeClass('active');
    });

    // 地址选择,有限获取顶级数据
    var area = $('.ui-dialog .inPtn p').eq(1).find('select');
    area.on('change', function(){
        var index  = $(this).index();
        var select = area[index];

        if (select) {
            region_find($(this).val(), select, 0);
            $.each(area, function(sort, ele) {
                if (sort > (index-1)) {
                    $(ele).empty();
                }
            });
        }
    });
});
</script>
</block>

